<!--  -->
<template>
  <wd-popup
    v-model="popupVisible"
    custom-style="border-radius: 24rpx;width: 80%; padding-top: 66rpx;background:transparent"
    position="center"
    :z-index="999"
  >
    <view class="class-code-popup">
      <view class="class-code-popup__close" @click="popupVisible = false">
        <wd-icon name="close" size="32rpx" color="#26292C"></wd-icon>
      </view>
      <view class="class-code-popup__title text-[32rpx] text-[#26292C] font-bold mb-40rpx">
        了解央国企一站式上岸课程
      </view>
      <image
        class="class-code-popup__code w-[336rpx] h-[336rpx] mb-[32rpx]"
        :src="`${baseUlr}/admin-api/infra/file/4/get/c7c776423c728604f41a6951e62c8de1588893ed88447374e4809c9e95933f2b.jpg`"
        :show-menu-by-longpress="true"
      >
      </image>
      <view class="text-[28rpx] text-[#191C23] font-bold mb-[44rpx]">添加央国企课程顾问</view>
      <view class="text-[28rpx] text-[#FF800E]">长按识别二维码，添加老师微信</view>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup>
  import { getEnvBaseUrl } from '@/utils';
  import { ref } from 'vue';

  const popupVisible = ref(false);
  const baseUlr = getEnvBaseUrl();

  const open = () => {
    popupVisible.value = true;
  };

  defineExpose({
    open,
  });
</script>

<style lang="scss" scoped>
  .class-code-popup {
    background:
      linear-gradient(180deg, rgba(255, 128, 14, 0.22) 0%, rgba(255, 128, 14, 0) 100%), #ffffff;

    display: block;
    position: relative;
    border-radius: 24rpx;
    padding-top: 102rpx;
    padding-bottom: 72rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &__close {
      position: absolute;
      top: 30rpx;
      right: 40rpx;
    }
    &__code {
      background: #fff;
    }
  }
</style>
